import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '@/components/home/header'
import Loading from '@/components/home/loading/saleLoading'
import ChangeRule from '@/components/changeCourse/changeRule'
import CourseList from '@/components/changeCourse/courseList'
import ChangeAccount from '@/components/changeCourse/changAccount'
import { customToast } from '@/components/customToast/index'
import { getchangeCourse, getProfileInfo } from '@/api/changeCourse'
import { ChangeCourseListData, AccountData } from '@/types/changeCourse'

const changeCourseList: FC<{}> = () => {
  const [loading, setLoading] = useState(true)
  const [couresData, setCourseData] = useState<Partial<ChangeCourseListData>>({})
  const [accountInfo, setAccountInfo] = useState<Partial<AccountData>>({})
  const navigate = useNavigate()
  useEffect(() => {
    getProfileInfo({}).then((res) => {
      if (res.stat == 1) {
        setAccountInfo(res.data)
      }
      if (res.stat == 9) {
        customToast({
          className: 'custom_toast_normal',
          text: res.msg || '登录校验失败',
          duration: 2000,
        })
        window.location.href =
          'https://bcc.xiwang.com/touch-login?redirect_url=' +
          encodeURIComponent(window.location.href)
      }
    })
    getchangeCourse({}).then((res) => {
      setLoading(false)
      if (res.stat == 1) {
        setCourseData(res.data)
      }
      if (res.stat == 0) {
        customToast({
          className: 'custom_toast_normal',
          text: res.msg || '登录校验失败',
          duration: 2000,
        })
        window.location.href =
          'https://bcc.xiwang.com/touch-login?redirect_url=' +
          encodeURIComponent(window.location.href)
      }
    })
  }, [])
  return (
    <div className="w-full h-full min-h-screen bg-gray-F7F7F8 font-normal font-regular">
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'调换课'}
        headerColor="bg-white"
        notHeaderColor={false}
      ></Header>
      <ChangeRule />
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      {accountInfo.id ? <ChangeAccount accountInfo={accountInfo} /> : null}
      <CourseList list={couresData.list || []}></CourseList>
    </div>
  )
}

export default changeCourseList
